<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字游戏</title>
</head>
<body>
    <button id="resetBtn">重新开始一局游戏</button><br>
    <span>要猜的数字</span>
    <input type="">
    <button id="guessBtn">猜</button><br><br>
    <span>结果:</span><span id="result"></span><br>
    <span>已经猜的次数:</span><span id="guessCount">0</span>

<script>
    //1.把上面所需要的元素拿到手
    let resetBtn = document.querySelector('#resetBtn');
    let input = document.querySelector('input');
    let guessBtn = document.querySelector('#guessBtn');
    let resultSpan = document.querySelector('#result');
    let guessCountSpan = document.querySelector('#guessCount');
//2.生成1-100随机数
let toGuess = Math.floor(Math.random()*100)+1;//1-100的随机数，区别于java
console.log(toGuess);

//3.实现点击 猜 按钮的逻辑
guessBtn.onclick = function(){
    //1.读取input 中输入内容，并转换成整数
    if(input.value == ''){
        return;
    }
    let curNum = parseInt(input.value);
    //2.判定大小并给出提示。
    if(curNum < toGuess){
        resultSpan.innerHTML = '小了'
        resultSpan.style.color = 'red';
    }else if(curNum > toGuess){
        resultSpan.innerHTML = '大了'
        resultSpan.style.color = 'red';
    }else{
        resultSpan.innerHTML = '正确！'
        resultSpan.style.color = 'green';
    }
    //3.更新猜的次数
    let guessCount = parseInt(guessCountSpan.innerHTML);
   guessCount += 1;
    guessCountSpan.innerHTML = guessCount;

    //4.实现开始新游戏的操作
    resetBtn.onclick = function(){
        //刷新页面即可
        // reload 直接刷新页面
        location.reload();
    }

}
</script>

</body>
</html>